<template>
  <div class="order-detail" id="orderDetail" v-if="order">
    <magic-header titleName="订单详情" :returnNative="native"></magic-header>
    <scroll>
      <!-- 头部信息 -->
      <section class="header-section">
        <!-- 订单跟踪 -->
        <div class="trace-content" v-tap="{methods:orderTrace, item:order}">
          <span class="trace-label">订单跟踪</span>
          <span class="trace-type">
            <span class="trace-type-name">{{TYPES[order.type]}}</span>
            <i class="iconfont">&#xe634;</i>
          </span>
        </div>
        <hr v-if="order.orderType != 3 && order.orderType != 2">
        <!-- 地址信息 (普通商品0 整车9展示)-->
        <div class="address-content" v-if="order.orderType == 0 || order.orderType == 9">
          <location class="location" :value="order" :link="false"></location>
        </div>
        <!-- 发票信息 -->
        <div class="invoice-content" v-if="order.invoiceTitle">
          <!-- 发票信息 -->
          <div class="preview">
            <preview :left="true" class="order-service-info">
              <preview-item label="发票抬头" :value="order.invoiceTitle"></preview-item>
            </preview>
          </div>
        </div>
        <!-- 服务信息 -->
        <div class="service-content">
          <!-- 试乘试驾 -->
          <div v-if="order.orderType == 8" class="preview">
            <preview :left="true" class="order-service-info">
              <preview-item label="试驾车型" :value="order.orderItems[0].appointment.productName"></preview-item>
              <preview-item label="预约时间" :value="order.orderItems[0].appointment.appontmentDate"></preview-item>
            </preview>
          </div>
          <!-- 预约置换 -->
          <div v-if="order.orderType == 6" class="preview">
            <preview :left="true" class="order-service-info">
              <preview-item label="心仪车型" :value="order.orderItems[0].appointment.productName"></preview-item>
              <preview-item label="已有车型" :value="order.orderItems[0].appointment.car.type"></preview-item>
            </preview>
          </div>
          <!-- 贷款购车 -->
          <div v-if="order.orderType == 7" class="preview">
            <preview :left="true" class="order-service-info">
              <preview-item label="心仪车型" :value="order.orderItems[0].appointment.productName"></preview-item>
              <preview-item label="裸车价格" :value="financialData.price" :icon="true"></preview-item>
              <preview-item :label="'首付'+Number(financialData.downPayment)*100+'%'" :value="financialData.downPaymentPrice" :icon="true"></preview-item>
              <preview-item label="月供" :value="financialData.paymentPerMonth" :icon="true"></preview-item>
            </preview>
          </div>
        </div>
      </section>
      <!-- 商品信息或类型 -->
      <section class="panel-section">
        <div>
          <!-- order item title -->
          <div class="order-item-title">
            <div>
              <span>{{'订单编号:' + order.sn}}</span>
            </div>
          </div>
          <!-- order item info -->
          <div v-for="(orderItem,index) in order.orderItems" :key="index">
            <panel class="order-item-info" :value="orderItem.product" :orderType="order.orderType" v-tap="{methods: toProductDetail, item: orderItem}">
              <div slot="desc" class='desc'>
                {{orderItem.desc}}
              </div>
              <!-- <price slot="price" class="order-item-price" v-if="order.couponDiscount > 0" :value="order.amount"></price> -->
              <!-- <price slot="price" class="order-item-price" v-if="order.couponDiscount == 0" :value="orderItem.price"></price> -->
              <price slot="price" class="order-item-price" :value="orderItem.price"></price>
              <span slot="number" class="number">X{{orderItem.quantity}}</span>
            </panel>
            <!-- apply operate button -->
            <div class="order-item-button" flex v-if="[1,3,7,8,13].indexOf(Number(order.orderType)) == -1">
              <div class="operate-buttons">
                <!-- orderType 
                  0-普通商品订单（车品） 1-充值订单 2-服务订单 3-一键救援预约 4-维修预约 5-保养预约 
                  6-置换预约 7-贷款购车预约 8-试乘试驾预约 9-整车订单 10-普通订单  13-sim卡充值订单  
                  14-平台服务
                  !!! 13-通讯卡充值 1-会员储值 8-试乘试驾 7-贷款购车 3-一键救援 不支持退款 
                -->
                <!-- type 
                  0:全部 1:待付款(未付款) 2:待收货(已发货) 3:待评价(已收货) 4:退货/款(不使用)
                  5:待发货(已付款) 6:已完成 7:已关闭 8:订单过期 9:退款退货中 10:退款退货完成
                -->
                <!-- refundsState 退货状态
                  0:卖家未确认 1:卖家拒绝｛退款退货｝2:卖家同意买家｛退货｝3:买家发货 4:卖家拒收货物 5:卖家(收货并)｛退款｝ 6:买家取消申请 
                  空则表示该订单没有退货相关内容
                 -->
                <!-- 退款 type => 2:待收货(已发货) 5:待发货(已付款)-->
                <order-button v-tap="{methods: applyOperate, operateType:0, item: orderItem}" v-if="!orderItem.refundsState && (order.type === '5' || order.type === '2')" color="#888888" border="#BEBEBE">
                  申请退款
                </order-button>
                <!-- 退款 type => 3:待评价(已收货) 6:已完成 -->
                <order-button v-tap="{methods: applyOperate, operateType:1, item: orderItem}" v-if="!orderItem.refundsState && (order.type === '3' || order.type === '6')" color="#888888" border="#BEBEBE">
                  申请售后
                </order-button>
                <!-- refundsState => 0:卖家未确认 2:卖家同意买家｛退货｝-->
                <order-button v-tap="{methods: applyOperate, operateType:2, item: orderItem}" v-if="orderItem .refundsState === '0' || orderItem .refundsState === '2' || orderItem.refundsState === '3'" color="#888888" border="#BEBEBE">
                  修改申请
                </order-button>
                <!-- refundsState => 0:卖家未确认 2:卖家同意买家｛退货｝-->
                <order-button v-tap="{methods: applyOperate, operateType:3, item: orderItem}" v-if="orderItem .refundsState === '0' || orderItem .refundsState === '2'" color="#888888" border="#BEBEBE">
                  退款详情
                </order-button>
                <!-- refundsState => 0:卖家未确认 2:卖家同意买家｛退货｝3:买家发货 -->
                <order-button v-tap="{methods: applyOperate, operateType:4, item: orderItem}" v-if="orderItem .refundsState === '0' || orderItem .refundsState === '2' || orderItem .refundsState === '3'" color="#FBAD59" border="#FBAD59">
                  取消申请
                </order-button>
                <!-- refundsState => 3:买家发货 -->
                <!-- <order-button v-tap="{methods: applyOperate, operateType:5, update: true, item: orderItem}" v-if="orderItem.refundsState === '3'" color="#888888" border="#BEBEBE">
                  修改申请
                </order-button> -->
                <!-- refundsState => 3:买家发货 -->
                <order-button v-tap="{methods: applyOperate, operateType:6, item: orderItem}" v-if="orderItem .refundsState === '3'" color="#888888" border="#BEBEBE">
                  退货详情
                </order-button>
                <!-- refundsState => 3:买家发货 5:卖家(收货并)｛退款｝-->
                <order-button v-tap="{methods: applyOperate, operateType:7, item: orderItem}" v-if="orderItem .refundsState === '5'" color="#888888" border="#BEBEBE">
                  重新购买
                </order-button>
                <!-- refundsState => 1:卖家拒绝｛退款退货｝ 4:卖家拒收货物 6:买家取消申请-->
                <order-button v-tap="{methods: applyOperate, operateType:8, item: orderItem}" v-if="orderItem .refundsState === '1' || orderItem .refundsState === '4' || orderItem .refundsState === '6'" color="#888888" border="#BEBEBE">
                  重新申请
                </order-button>
              </div>
            </div>
          </div>
          <!-- 订金相关数据 -->
          <div class="preview" v-if="order.isSubscription == '1'">
            <preview>
              <preview-money :label="sectionOne.text" :money="sectionOne.money" :value="sectionOne.value" :state="sectionOne.state"></preview-money>
              <preview-money :label="sectionTwo.text" :money="sectionTwo.money" :value="sectionTwo.value" :state='sectionTwo.state'></preview-money>
            </preview>
          </div>
          <!-- finance 价格及优惠信息等 -->
          <div class="preview">
            <preview>
              <preview-item label="产品总额" :value="order.price" :icon="true"></preview-item>
              <preview-item label="邮费" :value="order.freight" :icon="true" :add="true"></preview-item>
              <preview-item label="优惠" :value="order.couponDiscount || '0'" :icon="true" :minus="true"></preview-item>
              <preview-item label="商家调整" v-if="order.offsetAmount" :value="Math.abs(order.offsetAmount).toFixed(2)" :icon="true" :minus="true"></preview-item>
              <preview-item label="V豆" :value="order.beanDiscount || '0'" :icon="true" :minus="true" v-if="order.beanDiscount"></preview-item>
              <preview-item label="实付款" :value="order.amountPaid" :icon="true" color="#E76E53" v-if="order.isSubscription !== '1' && order.paymentStatus !== '0'"></preview-item>
              <preview-item label="需付款" :value="Number(order.amount) < 0 ? '0.00' : order.amount" :icon="true" color="#E76E53" v-if="order.isSubscription !== '1' && order.paymentStatus === '0'"></preview-item>
              <preview-item label="总计" :value="order.amount" :icon="true" color="#E76E53" v-if="order.isSubscription === '1'"></preview-item>
            </preview>
          </div>
        </div>
      </section>
      <!-- 店铺 支付方式 下单时间 付款时间 -->
      <section class="shop-section">
        <div>
          <!-- 支付方式 下单时间 付款时间 -->
          <div>
            <preview :left="true" class="order-service-info">
              <preview-item label="支付方式 : " :value="order.paymentMethodName" v-if="order.paymentMethodName"></preview-item>
              <preview-item v-if="(order.method === '0' || order.method === '1') && order.shippingMethodName" label="配送方式 : " :value="order.shippingMethodName"></preview-item>
              <preview-item label="下单时间 : " :value="order.orderTime"></preview-item>
              <preview-item label="付款时间 : " :value="order.paymentTime" v-if="order.paymentTime"></preview-item>
              <preview-item label="发货时间 : " :value="order.deliveryTime" v-if="order.deliveryTime"></preview-item>
            </preview>
          </div>
          <hr>
          <!-- 店铺 -->
          <div>
            <businessInfo :value="order.shop ? order.shop.mobile : ''" :position="order.shop" :shopId="order.shop ? order.shop.id : ''" class="detail">
              <span slot="name">{{ order.shop ? order.shop.name : '' }}</span>
              <span slot="address">{{ order.shop ? order.shop.address : '' }}</span>
            </businessInfo>
          </div>
        </div>
      </section>
    </scroll>
    <foot class="text-right operate-buttons" style="padding:5px 10px;">
      <!-- orderType 
        0-普通商品订单（车品） 1-充值订单 2-服务订单 3-一键救援预约 4-维修预约 5-保养预约 
        6-置换预约 7-贷款购车预约 8-试乘试驾预约 9-整车订单 10-普通订单  13-sim卡充值订单  
        14-平台服务
        !!! 13-通讯卡充值 1-会员储值 8-试乘试驾 7-贷款购车 3-一键救援 不支持退款 
      -->
      <!-- type 
        0:全部 1:待付款(未付款) 2:待收货(已发货) 3:待评价(已收货) 4:退货/款(不使用)
        5:待发货(已付款) 6:已完成 7:已关闭 8:订单过期 9:退款退货中 10:退款退货完成 11:待商家确认 12:商家已确认
      -->
      <!-- method 支付方式
        0:在线支付;1:货到付款;2:到店支付
       -->
      <!-- type不包含 7:已关闭 8:订单过期 -->
      <order-button v-tap="{methods: operate, operateType: 0}" v-if="order.type !== '7' && order.type !== '8'" color="#888888" border="#BEBEBE">
        客服咨询
      </order-button>
      <!-- type 3:待评价(已收货) -->
      <order-button v-tap="{methods: operate, operateType: 1}" v-if="order.type === '3'" color="#FBAD59" border="#FBAD59">
        立即评价
      </order-button>
      <!-- 1:已评价 -->
      <order-button v-tap="{methods: operate, operateType: 2}" v-if="order.isReviewed === '1'" color="#FBAD59" border="#FBAD59">
        查看评价
      </order-button>
      <!-- type 2:待收货(已发货) 6:已完成  method 0:在线支付 1:货到付款  orderType 0:普通商品订单（车品） -->
      <order-button v-tap="{methods: operate, operateType: 3}" v-if="[1,3,7,8,13].indexOf(Number(order.orderType)) == -1 && (order.type === '2' || order.type === '6')&&(order.method === '0'||order.method === '1')" color="#888888" border="#BEBEBE">
        物流跟踪
      </order-button>
      <!-- type 2:待收货(已发货) -->
      <order-button v-tap="{methods: operate, operateType: 4}" v-if="[1,3,7,8,13].indexOf(Number(order.orderType)) == -1 && order.type === '2'" color="#FBAD59" border="#FBAD59">
        确认收货
      </order-button>
      <!-- type 1:待付款(未付款)  method 0:在线支付 -->
      <order-button v-tap="{methods: operate, operateType: 5}" v-if="[1,3,7,8,13].indexOf(Number(order.orderType)) == -1 && order.type === '1'&&order.method === '0'" color="#FBAD59" border="#FBAD59">
        <!-- isSubscription 是否是订金订单(0:不是,1:是) -->
        <!-- amountPaid 已付金额 -->
        {{order.isSubscription !=='1'?'立即支付':Number(order.amountPaid)*10 !== 0 ?'支付尾款':'支付订金'}}
      </order-button>
      <!-- 两种情况 (1) 1:待付款(未付款) 11:待商家确认  (2) 5:待发货(已付款) 0:在线支付 1:货到付款 -->
      <order-button v-tap="{methods: operate, operateType: 6}" v-if="(order.type === '1' || order.type === '11')||((order.method === '1'||order.method === '2')&&order.type === '5')" color="#FBAD59" border="#FBAD59">
        取消订单
      </order-button>
    </foot>
    <!-- 提示 弹出框 等 -->
    <section class="tip-section">
      <!-- 取消申请 -->
      <model :isShow="cancelApplyShow" title=" " @closeIsModel="cancelApply">
        请确认是否取消申请!
      </model>
      <!-- 确认收货 -->
      <model :isShow="confirmOrderShow" title=" " v-on:closeIsModel="confirmOrder">
        请确认是否已经收到货物
      </model>
      <!-- 取消订单 原因 -->
      <cancel-order :isShow="cancelOrderShow" @submitCancalOrder="cancelOrder"></cancel-order>
      <!-- 支付相关 -->
      <section>
        <!-- 输入密码 -->
        <model ref="passwordModel" title="请输入支付密码">
          <password v-model="password"></password>
        </model>
        <!-- 密码输入错误提示 -->
        <model modelType="prompt" title="" :isShow="passwordShow">
          <h4 slot>支付密码输入错误, 请重试</h4>
          <div slot="work" layout="row" layout-align="space-between center" flex>
            <a flex v-tap="{methods: payByBalance}">重试</a>
            <a flex v-tap="{methods: setPassword}">找回密码</a>
          </div>
        </model>
        <!-- 支付方式选择 -->
        <mu-bottom-sheet :open="paymentObj.paymentTypeShow" @close="closePaymentType">
          <mu-list @itemClick="closePaymentType">
            <mu-sub-header class="text-center">
              支付详情
            </mu-sub-header>
            <payment :value="order" :selectedPaymentMethodId="order.paymentMethodId" :orderId="order.id" :callback="payment" v-if="order" :sum="order.amountPayable" type="buy"></payment>
          </mu-list>
        </mu-bottom-sheet>
      </section>
    </section>
  </div>

</template>

<script>
// components
import magicHeader from "components/magicHeader";
import location from "components/location.vue";
import panel from "components/panel";
import price from "components/price";
import orderButton from "components/order-button";
import preview from "components/preview";
import previewItem from "components/preview-item";
import businessInfo from "components/detail_businessInfo";
import foot from "components/foot";
import scroll from "components/scroll";
import model from "components/model/model.vue";
import cancelOrder from "components/cancelOrder";
import password from "components/password/password.vue";
import previewMoney from "components/preview-money";
import payment from "../payment/p_payment.vue";
// services
import {
  QueryOrderDetail,
  DeleteRefunds,
  UpdateOrder,
  BalancePayment
} from "services/orders/order";

export default {
  components: {
    magicHeader,
    location,
    panel,
    price,
    orderButton,
    preview,
    previewItem,
    businessInfo,
    foot,
    scroll,
    model,
    cancelOrder,
    password,
    previewMoney,
    payment
  },
  data() {
    return {
      // 0:全部, 1:待付款(未付款), 2:待收货(已发货), 3:待评价(已收货), 4:退货/款(不使用), 5:待发货(已付款), 6:已完成, 7:已关闭, 8:订单过期, 9:退款退货中, 10:退款退货完成
      TYPES: [
        "全部",
        "待付款",
        "已执行",
        "待评价",
        "退货/款",
        "待执行",
        "已完成",
        "已取消",
        "订单过期",
        "退款退货中",
        "退款退货完成",
        "待商家确认",
        "商家已确认"
      ],
      REFUND_TYPES: [
        "商家处理中",
        "商家已拒绝,请处理",
        "商家已同意,请退货",
        "商家处理中",
        "商家已拒绝, 请处理",
        "退款成功",
        "退款关闭"
      ],
      orderId: "", // 订单id
      order: null, // order data
      orderItem: null,
      financialData: {}, // 贷款 data
      // cond
      cancelApplyShow: false,
      confirmOrderShow: false,
      cancelOrderShow: false,
      passwordShow: false,
      paymentObj: {
        // 支付相关参数
        paymentTypeShow: false
      },
      password: "",
      // 订金相关
      sectionOne: {
        money: 0,
        text: "阶段1：订金 ￥",
        value: "未支付",
        state: false
      },
      sectionTwo: {
        money: 0,
        text: "阶段2：尾款 ￥",
        value: "未支付",
        state: false
      },
      native: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 获取订单id
      this.orderId = this.$route.params.orderId;
      // 查询订单详情
      this.queryOrderDetail(this.orderId);
    },
    // 查询订单详情
    queryOrderDetail(orderId) {
      QueryOrderDetail.bind(this)(
        {
          orderId: orderId
        },
        resp => {
          console.log(resp);

          // 普通商品
          resp.order.orderItems.forEach(orderItem => {
            let desc = "";
            if (orderItem.product) {
              let SpecificationValueData =
                orderItem.product.specificationValues;
              SpecificationValueData.length > 0 &&
                SpecificationValueData.forEach(type => {
                  desc =
                    desc + type.specificationData.name + ":" + type.name + " ";
                });
              orderItem.desc = desc;
            }
          });

          // 响应处理
          resp.order.orderItems.forEach(orderItem => {
            orderItem.product = Object.assign({}, orderItem.product, {
              "image": orderItem.image,
              "name": orderItem.name,
              "fullName": orderItem.fullName
            })
          })

          this.order = resp.order;
          // isSubscription 是否是订金订单(0:不是,1:是)
          resp.order.isSubscription == 1 && this.deposit(resp.order);
          // 贷款购车
          resp.order.orderType == 7 && this.financial(resp.order);
        }
      );
    },
    // 贷款相关
    financial(order) {
      let appointment = order.orderItems[0].appointment;
      this.financialData = {
        price: appointment.product.price, // 价格
        downPayment: appointment.downPayment, // 首付比例
        year: appointment.year // 贷款年限
      };
      // 首付钱数
      this.financialData.downPaymentPrice = (
        Number(appointment.product.price) * Number(appointment.downPayment)
      ).toFixed(2);
      // 月供
      this.financialData.paymentPerMonth = (
        (Number(this.financialData.price) -
          Number(this.financialData.downPaymentPrice)) /
        (Number(this.financialData.year) * 12)
      ).toFixed(2);
    },
    // 订金相关
    deposit(order) {
      // this.isSubscription = order.isSubscription // 是否是订金订单(0:不是,1:是)
      // 订金:[amountPrepay] 尾款:[amountFinalpay]
      this.sectionOne.money = order.amountPrepay;
      this.sectionTwo.money = order.amountFinalpay;
      // paymentStatus 支付状态 0：未支付，1：部分支付，2：全部支付，3：部分退款 ，4：全部退款
      console.log("order.paymentStatus: " + order.paymentStatus);
      if (order.paymentStatus === "1") {
        this.sectionOne.value = "已支付";
        this.sectionTwo.state = true;
        this.sectionOne.state = false;
      } else if (order.paymentStatus === "2") {
        this.sectionOne.value = "已支付";
        this.sectionTwo.value = "已支付";
        this.sectionTwo.state = false;
        this.sectionOne.state = false;
      } else {
        this.sectionOne.state = true;
      }
    },
    // 订单跟踪
    orderTrace(params) {
      this.$router.push({
        name: "o_trace",
        query: {
          orderItem: JSON.stringify(params.item)
        }
      });
    },
    /* 申请操作methods: apply refundDetail showCancelApply closeCancelApply cancelApply purchaseAgain */
    /**
     * 申请操作
     * @param operateType
     * 0-申请退款 1-申请售后 2-修改申请 3-退款详情 4-取消申请 5-修改申请 6-退货详情 7-重新购买 8-重新申请
     */
    applyOperate(params) {
      let operateType = params.operateType;
      let orderItem = (this.orderItem = params.item);
      let query;
      switch (operateType) {
        case 0: {
          // 申请退款
          query = {
            orderItem: JSON.stringify(orderItem)
          };
          this.apply(query);
          break;
        }
        case 1: {
          // 申请售后
          query = {
            orderItem: JSON.stringify(orderItem)
          };
          this.apply(query);
          break;
        }
        case 2: {
          // 修改申请
          query = {
            orderItem: JSON.stringify(
              Object.assign({}, orderItem, { update: true })
            ),
            amount: orderItem.amount
          };
          this.apply(query);
          break;
        }
        case 3: {
          // 退款详情
          query = {
            orderItem: JSON.stringify(orderItem)
          };
          this.refundDetail(query);
          break;
        }
        case 4: {
          // 取消申请
          this.showCancelApply();
          break;
        }
        // case 5: { // 修改申请
        //   this.showCancelApply()
        //   break;
        // }
        case 6: {
          // 退货详情
          query = {
            orderItem: JSON.stringify(orderItem)
          };
          this.refundDetail(query);
          break;
        }
        case 7: {
          // 重新购买
          this.purchaseAgain(orderItem);
          break;
        }
        case 8: {
          // 重新申请
          query = {
            orderItem: JSON.stringify(orderItem)
          };
          this.apply(query);
          break;
        }
      }
    },
    // 申请
    apply(query) {
      this.$router.push({
        name: "o_return",
        query: query
      });
    },
    // 退款详情
    refundDetail(query) {
      this.$router.push({
        name: "o_returnDetail",
        query: query
      });
    },
    showCancelApply() {
      this.cancelApplyShow = true;
    },
    closeCancelApply() {
      this.cancelApplyShow = false;
    },
    // 取消申请
    cancelApply(params) {
      if (params === "true") {
        DeleteRefunds.bind(this)(
          {
            id: this.orderItem.orderId,
            orderItemId: this.orderItem.id
          },
          resp => {
            this.queryOrderDetail(this.orderId);
          }
        );
      }
      this.closeCancelApply();
    },
    // 重新购买
    purchaseAgain(orderItem) {
      let req = {
        methodName: "AddCartItem",
        quantity: "1",
        productId: orderItem.product.id
      };
      this.$.get(req).then(resp => {
        this.$router.push({
          name: "asc_shoppingCart"
        });
      });
    },
    /* 订单操作methods:  */
    /**
     * 订单操作
     */
    operate(params) {
      let operateType = params.operateType;
      switch (operateType) {
        case 0: {
          // 客服咨询
          this.customerService();
          break;
        }
        case 1: {
          // 立即评价
          this.evaluation(this.order);
          break;
        }
        case 2: {
          // 查看评价
          this.evaluationView(this.order);
          break;
        }
        case 3: {
          // 物流跟踪
          this.logistics(this.order);
          break;
        }
        case 4: {
          // 确认收货
          this.showConfirmOrder();
          break;
        }
        case 5: {
          // 支付
          this.showPaymentType();
          break;
        }
        case 6: {
          // 取消订单
          this.showCancelOrderReason();
          break;
        }
      }
    },
    // 客服咨询
    customerService() {
      this.$.push(
        "router_callCustomerService",
        {
          customerServiceId: "1",
          clentId: this.$.userId
        },
        () => {
          window.alert("进入在线客服页面");
        }
      );
    },
    // 评价
    evaluation(orderItem) {
      this.$router.push({
        name: "el_selfEvaluation",
        query: {
          orderItem: JSON.stringify(orderItem)
        }
      });
    },
    // 查看评价
    evaluationView(orderItem) {
      this.$router.push({
        name: "el_selfEvaluation_view",
        query: {
          orderItem: JSON.stringify(orderItem)
        }
      });
    },
    // 物流跟踪
    logistics(orderItem) {
      this.$router.push({
        name: "l_logistics",
        params: {
          shippingSn: orderItem.shippings[0].sn
        }
      });
    },
    showConfirmOrder() {
      this.confirmOrderShow = true;
    },
    closeConfirmOrder() {
      this.confirmOrderShow = false;
    },
    // 确认收货
    confirmOrder(params) {
      if (params === "true") {
        UpdateOrder.bind(this)(
          {
            type: "1",
            orderId: this.order.id
          },
          resp => {
            this.$router.push({
              name: "result",
              query: {
                carItem: JSON.stringify(this.order)
              }
            });
          },
          (err, code) => {
            // 确认收货出错, 可能为订单过期, 重新查询订单详情
            this.$.toast(err);
            this.queryOrderDetail(this.orderId);
          }
        );
      }
      this.closeConfirmOrder();
    },
    // 选择取消原因
    showCancelOrderReason() {
      this.cancelOrderShow = true;
    },
    // 选择取消原因
    closeCancelOrderReason() {
      this.cancelOrderShow = false;
    },
    // 取消订单
    cancelOrder(content) {
      // service invoke
      if (content) {
        if (content == "default") {
          this.$.toast("请选择原因");
        } else {
          UpdateOrder.bind(this)(
            {
              type: "0",
              orderId: this.order.id,
              content: content
            },
            resp => {
              if (this.$route.params.native) {
                this.$.back();
                this.$.deleteAttr("router");
              } else {
                this.$router.go(-1);
              }
            }
          );
        }
      }
      this.closeCancelOrderReason();
    },
    /* 支付methods: closePaymentType showPaymentType payment payByBalance balancePayment setPassword */
    // 关闭支付方式选择
    closePaymentType() {
      this.paymentObj.paymentTypeShow = false;
    },
    // 展示支付方式选择
    showPaymentType() {
      // 展示支付方式
      this.paymentObj.paymentTypeShow = true;
      // this.paymentObj.value = this.orderItem;
      // this.paymentObj.value.orderId = this.orderItem.id;
    },
    /**
     * 支付
     * @param payway 0-支付宝 2-余额
     */
    payment(params, payway) {
      // 余额支付, 展示密码输入框
      if (payway === "2") {
        this.closePaymentType();
        this.payByBalance();
      } else {
        this.$.push(
          "router_pay",
          {
            orderId: this.order.id,
            payType: payway
          },
          res => {
            this.closePaymentType();
            if (res === "0") {
              this.$.toast("支付成功");
              this.queryOrderDetail(this.orderId);
            }
            if (res === "1") {
              this.$.toast("支付失败");
            }
            if (res === "2") {
              this.$.toast("支付取消");
            }
          }
        );
      }
    },
    // 余额支付
    payByBalance() {
      let vm = this;
      this.passwordShow = false;
      let passwordModel = this.$refs.passwordModel;
      let _close = passwordModel.close;
      let _name = _close.name;
      // 注入model的close方法, 点击按钮会首先调用close方法
      if (_name !== "customClose") {
        passwordModel.close = function customClose() {
          let args = arguments;
          if (args && !args[0].confirm) {
            _close.bind(passwordModel)(...args);
            return;
          }
          if (vm.password.length < 6) {
            vm.$.toast("请输入合理密码");
            return;
          }
          _close.bind(passwordModel)({ confirm: true });
        };
      }
      // 绑定按钮方法
      passwordModel.show().then(
        () => {
          //  点击确定按钮
          if (vm.password.length < 6) {
            vm.$.toast("请输入合理密码");
          } else {
            this.balancePayment();
          }
        },
        () => {
          vm.$.toast("支付取消");
        }
      );
    },
    // 调用server 余额支付方法
    balancePayment() {
      BalancePayment.bind(this)(
        {
          password: this.password,
          orderId: this.order.id
        },
        resp => {
          // order detail
          this.queryOrderDetail(this.orderId);
        },
        (err, code) => {
          if (code === "376") {
            // 会员卡余额不足
            this.$.toast("余额不足");
          } else if (code === "378") {
            // 支付密码未设定, 跳到设置密码页面
            this.$.toast("支付密码未设定");
            this.setPassword();
          } else if (code === "380") {
            // 支付密码错误, 弹出框, 可以重置密码
            this.passwordShow = true;
          } else {
            this.$.toast(err);
          }
        }
      );
    },
    // 跳到设置支付密码页面
    setPassword() {
      this.$.push("router_setPayPassword", null, () => {
        console.log("页面成功跳转");
      });
    },
    // 跳转至商品页
    toProductDetail(params) {
      if (params.item.product) {
        if (params.item.product.categoryType === "1") {
          this.$router.push({
            name: "sg_goods",
            params: { id: params.item.product.id, name: "1" }
          });
        } else {
          this.$router.push({
            name: "sg_goods_car",
            params: { id: params.item.product.id, name: "1" }
          });
        }
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      /**
       * 跳转进来的时候使用的是 replace 页面判断为使用 路由跳转
       * 在返回的使用调用 back（）方法 实际应该返回到原生页面
       *
       * 判断预约维修页面 进入的时候使用 桥接返回 到上一级页面
       */
      if (from.name === "appoint_native") {
        vm.native = true;
      } else {
        vm.native = vm.$route.params.native;
      }
    });
  }
};
</script>

<style lang="scss" scoped>
@mixin trace-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@mixin after-border {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  border-bottom: solid #d7d7d7 1px;
  transform: scaleY(0.4);
}
$icar-yellow: #fa992e;
.order-detail {
  h2 {
    display: none;
  }
  .header-section {
    padding: 0px;
    border-bottom: 1px solid #d7d7d7;
    .iconfont {
      color: $icar-yellow;
      font-size: 14px;
    }
    .trace-content {
      @include trace-flex;
      position: relative;
      padding: 10px 10px 10px 15px;
      .trace-label {
        font-size: 1.2rem;
      }
      .trace-type {
        @include trace-flex;
        .trace-type-name {
          color: $icar-yellow;
          font-size: 1.2em;
        }
      }
    }
    hr {
      margin: 0 10px;
      position: relative;
      &:after {
        @include after-border;
      }
    }
  }
  .panel-section {
    border-bottom: 1px solid #d7d7d7;
    .order-item-title {
      padding: 10px 15px 0px 15px;
      div {
        position: relative;
        padding-bottom: 10px;
        &:after {
          @include after-border;
        }
      }
      span {
        color: #898989;
        font-size: 1.2rem;
      }
    }
    .order-item-info {
      .number {
        text-align: right;
        margin-right: 15px;
        color: #b4b4b4;
        font-size: 1.1rem;
      }
    }
    .order-item-button {
      text-align: right;
      padding: 10px 10px 0px 10px;
      div {
        position: relative;
        padding-bottom: 5px;
        &:after {
          @include after-border;
        }
      }
    }
  }
  .shop-section {
    hr {
      margin: 0 10px;
      position: relative;
      &:after {
        @include after-border;
      }
    }
  }
  .operate-buttons {
    div {
      margin-left: 10px;
    }
  }
}
</style>
<style lang="scss">
.location .iconfont {
  display: none !important;
}
#panel {
  &:after {
    border-bottom: none !important;
  }
}
.order-detail {
  h2 {
    display: none;
  }
  .desc {
    color: #b0b0b0;
    margin-top: 5px;
  }
}
</style>


